<template>
	<view>
		<uni-popup ref="popup" type="bottom">
			<view class="alert-header">
				<view class="cancle" @click="cancle">
					取消
				</view>
				<view class="title">
					请选择
				</view>
				<view class="confirm" @click="confirm">
					确定
				</view>
			</view>
			<view class="alert-content">
				<view class="alert-content-left"> 
					<view 
						class="alert-content-left-item" 
						v-for="(item,idx) in dataList" 
						:key="`left${idx}`"
						:class="currentLeftIdx==idx?'alert-content-left-item-select':''"
						@click="leftItemClicked(idx)"
					>
						<text :class="currentLeftIdx==idx?'left-item-select-text':'left-item-default-text'">{{item.xzqmc}}</text>
					</view>
				</view>
				<view class="alert-content-right">
					<view 
						class="alert-content-right-item" 
						v-for="(item,idx) in rightListData"
						:key="`right${idx}`"
						:class="curentRightIdx==idx?'alert-content-right-item-select':''"
						@click="rightItemClicked(idx)"
					>
						<text :class="curentRightIdx==idx?'right-item-select-text':'right-item-default-text'">{{item.xzqmc}}</text>
						<!-- <image class="right-item-select" v-if="curentRightIdx==idx" src="../static/image/list-select.png" mode=""></image> -->
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	export default {
		name:"AddressPicker",
		data() {
			return {
				rightListData:[],
				currentLeftIdx:0,
				curentRightIdx:0,
				dataList:[],
			};
		},
		mounted() {
			this.loadData()
		},
		methods: {
			show() {
				this.$refs.popup.open('bottom')
			},
			loadData() {
				request.get('xzqh/listAllQX',{}).then(res=>{
					this.dataList = res
					this.loadCountryListData(this.dataList[this.currentLeftIdx].xzqdm)
				}).catch(err=>{
					
				})
			},
			loadCountryListData(val){
				request.get('xzqh/findXzsByQxdm',{qxdm:val}).then(res=>{
					this.rightListData = res
				}).catch(err=>{
					
				})
			},
			leftItemClicked(val){
				this.currentLeftIdx = val
				this.loadCountryListData(this.dataList[this.currentLeftIdx].xzqdm)
				// this.rightListData = this.dataList[this.currentLeftIdx].children
			},
			rightItemClicked(val){
				this.curentRightIdx = val
			},
			cancle(){
				this.$refs.popup.close()
			},
			confirm(){
				// let message = `${this.dataList[this.currentLeftIdx].xzqmc}/${this.rightListData[this.curentRightIdx].xzqmc}`
				this.$emit('confirm',[this.dataList[this.currentLeftIdx],this.rightListData[this.curentRightIdx]])
				// if (this.rightListData[this.curentRightIdx].title == '其他') {
				// 	this.$emit('other',true)
				// }else{
				// 	this.$emit('other',false)
				// }
				this.$refs.popup.close()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.alert-header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #CCCCCC;
		height: 100rpx;
		background-color: #ffffff;
		padding: 0rpx 40rpx;
		.cancle{
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}
		.title{
			font-size: 32rpx;
			color: #333333;
			line-height: 47rpx;
		}
		.confirm{
			ont-weight: 400;
			font-size: 28rpx;
			color: #1764CE;
			line-height: 40rpx;
		}
	}
	.alert-content{
		height: 1088rpx;
		background-color: #ffffff;
		display: flex;
		&-left{
			width: 288rpx;
			overflow: scroll;
			&-item{
				height: 92rpx;
				font-weight: 400;
				font-size: 28rpx;
				text-align: center;
				background-color: #ffffff;
				display: flex;
				align-items: center;
			}
			&-item-select{
				background-color: #F7F8FB;
			}
			.left-item-select-text{
				color: #1764CE;
				width: 100%;
				border-left: solid 5rpx #1764CE;
				height: 34rpx;
				box-sizing: border-box;
			}
			.left-item-default-text{
				width: 100%;
				height: 34rpx;
			}
		}
		&-right{
			flex: 1;
			overflow: scroll;
			&-item{
				height: 92rpx;
				font-weight: 400;
				font-size: 28rpx;
				text-align: center;
				background-color: #ffffff;
				display: flex;
				align-items: center;
			}
			&-item-select{
				background-color: #F7F8FB;
				padding: 0rpx 18rpx;
			}
			.right-item-select-text{
				color: #1764CE;
				width: 100%;
				border-left: solid 5rpx #1764CE;
				height: 34rpx;
				box-sizing: border-box;
			}
			.right-item-default-text{
				width: 100%;
				height: 34rpx;
			}
			.right-item-select{
				width: 40rpx;
				height: 36rpx;
			}
		}
	}
	
</style>